<template>
    <div class="relation-user">
        <div class="header">
            <div style="display: flex; align-items: center;">
                <Checkbox v-model="checkAll"></Checkbox> 全选
            </div>
            <div>
                <Poptip
                    confirm
                    transfer
                    title="你确定要取消选中用户的分享吗?"
                    style="margin-right: 10px;"
                    @on-ok="batchUnshare"
                >
                    <Button type="error" ghost :disabled="currentItem.accepter != userId"
                        >批量取消</Button
                    >
                </Poptip>
                <Button
                    type="primary"
                    @click="$refs.shareModal.show()"
                    ghost
                    :disabled="currentItem.accepter != userId"
                    >分享</Button
                >
            </div>
        </div>
        <cardList
            :columns="columns"
            :data="tableData.list"
            v-show="tableData.total"
            :showCheckbox="true"
            @on-check="changeSelection"
        ></cardList>
        <Page
            v-show="tableData.total"
            :total="tableData.total"
            :page-size="queryParams.pageSize"
            :current="queryParams.pageIndex"
            show-total
            show-elevator
            @on-change="changePageNow"
        />
        <no-data text="暂无信息" v-show="!tableData.total"></no-data>
        <share-modal
            :currentItem="currentItem"
            @share-success="changePageNow(1)"
            ref="shareModal"
        ></share-modal>
    </div>
</template>

<script>
import { getShareList, unshareContent } from '@/api/scientific/share';
import NoData from '@/components/common/no-data';
import ShareModal from '@/view/research/filingList/share-modal';
import cardList from '@/components/list-template/card-list/cardList.vue';
import { mapState } from 'vuex';
export default {
    name: 'RelationFile',
    components: { NoData, ShareModal, cardList },
    props: {
        currentItem: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            checkAll: false,
            queryParams: {
                pageIndex: 1,
                pageSize: 10,
                contentId: this.$route.query.id
            },
            tableData: {
                list: [],
                total: 0
            },
            columns: [
                {
                    title: '被分享人',
                    key: 'userName',
                    align: 'center',
                    width: 150,
                    placement: 'top-left',
                    tooltip: true
                },
                {
                    title: '分享时间',
                    key: 'shareTime',
                    align: 'center',
                    placement: 'top-left',
                    width: 170
                },
                {
                    key: 'action',
                    align: 'center',
                    placement: 'top-right',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Poptip',
                                {
                                    props: {
                                        confirm: true,
                                        'ok-text': '确定',
                                        'cancel-text': '取消',
                                        type: 'error',
                                        size: 'large',
                                        title: '你确定要取消分享吗?',
                                        transfer: true
                                    },
                                    on: {
                                        'on-ok': () => {
                                            // 方法接收的是一个数组，传参时需要转化一下
                                            this.unshare([params.row.id]);
                                        }
                                    }
                                },
                                [
                                    h(
                                        'Button',
                                        {
                                            props: {
                                                type: 'text',
                                                size: 'small',
                                                disabled: this.currentItem.accepter != this.userId
                                            },
                                            attrs: {
                                                title: '取消分享'
                                            },
                                            style: {
                                                border: 'none',
                                                background: 'none',
                                                boxShadow: 'none',
                                                color: '#3D52C9'
                                            }
                                        },
                                        [
                                            // h('Icon', {
                                            //     props: {
                                            //         type: 'md-trash',
                                            //         size: 26
                                            //     }
                                            // })
                                            h('img', {
                                                attrs: {
                                                    src:
                                                        this.currentItem.accepter != this.userId
                                                            ? require('../../../assets/mainImage/delNote-d.png')
                                                            : require('../../../assets/mainImage/delNote-h.png')
                                                }
                                            })
                                        ]
                                    )
                                ]
                            )
                        ]);
                    }
                }
            ]
        };
    },
    computed: {
        ...mapState('user', ['userId'])
    },
    filters: {},
    watch: {
        checkAll(val) {
            this.tableData.list = this.tableData.list.map((item) => {
                item.checked = val;
                return item;
            });
        }
    },
    mounted() {},
    methods: {
        // 选中的人有变化时调用
        changeSelection(selection, item) {
            console.log(selection, item);
        },
        // 查询指定页数据
        changePageNow(val) {
            this.queryParams.pageIndex = val;
            this.getTableList();
        },
        // 查询列表
        getTableList() {
            this.checkAll = false;
            getShareList(this.queryParams)
                .then(({ code, message, data = {} }) => {
                    if (code !== 1) {
                        this.$Message.warning(message);
                        return;
                    }
                    this.tableData.list = data.items || [];
                    this.tableData.total = data.total;
                })
                .catch(() => {
                    this.$Message.error('获取科研分享人员异常');
                });
        },
        // 批量取消分享
        batchUnshare() {
            let ids = [];
            this.tableData.list.forEach((item) => {
                if (item.checked) {
                    ids.push(item.id);
                }
            });
            if (!ids.length) {
                this.$Message.warning('请选择需要取消的人员');
                return;
            }
            this.unshare(ids);
        },
        // 取消分享
        unshare(ids) {
            unshareContent(ids)
                .then(({ code, message }) => {
                    if (code !== 1) {
                        this.$Message.warning(message);
                        return;
                    }
                    this.$Message.success('取消分享成功');
                    // 删除后展示当前页，当前页没有数据展示前一页
                    this.queryParams.pageIndex =
                        this.tableData.list.length == ids.length && this.queryParams.pageIndex > 1
                            ? this.queryParams.pageIndex - 1
                            : this.queryParams.pageIndex;
                    this.getTableList();
                })
                .catch(() => {
                    this.$Message.error('取消分享异常');
                });
        }
    }
};
</script>

<style scoped>
.relation-user {
    height: 100%;
}
.relation-user /deep/ .ivu-page {
    text-align: center;
    margin-top: 20px;
}

.header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}
</style>
